<template>
  <!-- html结构 -->
    <Person ref="data"></Person>
    <!-- 给组件标签加ref,拿到的是组件实例，此时能看到的值是组件实例中defineExpose({a,b})-->
    <!-- {a: RefImpl, b: RefImpl, __v_skip: true} -->
    <button @click="showLog">测试</button>
</template>

<script lang="ts" setup name="App">
  import { ref} from 'vue'
  import Person from './components/Person.vue';

  // 创建一个data容器
  let data = ref()

  // 方法
  function showLog(){
    console.log(data.value);
  }
  


</script>

<style scoped>  
/* 加scoped,是局部样式，该里面的样式只应用于该文件上方的标签 */
/* CSS样式 */
</style>